<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-12-19 22:00
  PageName：index.html
  Function：项目目录
-->

<head>
    <meta charset="UTF-8">
    <title>JavaWeb_4.2_CSS</title>

    <style type="text/css">
        h3 {
            color: red;
        }
    </style>
</head>

<body>
<h3>a_style（CSS样式）</h3>
<a href="http://localhost:8080/css/a_style/a_Style.html">a_CSS样式</a><br>

<hr>

<h3>b_apply（CSS样式应用）</h3>
<a href="http://localhost:8080/css/b_apply/a_inlineStyle.html">a_CSS样式应用 - 行内样式</a><br>
<a href="http://localhost:8080/css/b_apply/b_embeddedStyle.html">b_CSS样式应用 - 内嵌式</a><br>
<a href="http://localhost:8080/css/b_apply/c_linktypeStyle.html">c_CSS样式应用 - 链接式</a><br>
<a href="http://localhost:8080/css/b_apply/d_importStyle.html">d_CSS样式应用 - 导入式</a><br>

<hr>

<h3>c_character（CSS特性）</h3>
<a href="http://localhost:8080/css/c_character/a_cascade.html">a_CSS特性 - 层叠性</a><br>
<a href="http://localhost:8080/css/c_character/b_inheritance.html">b_CSS特性 - 继承性</a><br>
<a href="http://localhost:8080/css/c_character/c_practice_index.html">c_第一个CSS3+DIV页面</a><br>

<hr>

<h3>d_selector（CSS选择器）</h3>

<h5>d1_selector_basic（基本选择器）</h5>
<a href="http://localhost:8080/css/d_selector/d1_selector_basic/a_TagSelector.html">a_基本选择器 - 标签选择器</a><br>
<a href="http://localhost:8080/css/d_selector/d1_selector_basic/b_ClassSelector.html">b_基本选择器 - 类选择器</a><br>
<a href="http://localhost:8080/css/d_selector/d1_selector_basic/c_ClassSelector.html">c_基本选择器 - 类选择器（多类引用）</a><br>
<a href="http://localhost:8080/css/d_selector/d1_selector_basic/d_ClassSelector.html">d_基本选择器 - 类选择器（指定类）</a><br>
<a href="http://localhost:8080/css/d_selector/d1_selector_basic/e_IDSelector.html">e_C基本选择器 - id选择器</a><br>
<a href="http://localhost:8080/css/d_selector/d1_selector_basic/f_UniversalSelector.html">f_C基本选择器 - 通配选择器</a><br>

<h5>d2_selector_combinatiion（组合选择器）</h5>
<a href="http://localhost:8080/css/d_selector/d2_selector_combinatiion/a_InclusionSelector.html">a_组合选择器 - 包含选择器</a><br>
<a href="http://localhost:8080/css/d_selector/d2_selector_combinatiion/b_childSelector.html">b_组合选择器 - 子选择器</a><br>
<a href="http://localhost:8080/css/d_selector/d2_selector_combinatiion/c_adjacentSelector.html">c_组合选择器 - 相邻选择器</a><br>
<a href="http://localhost:8080/css/d_selector/d2_selector_combinatiion/d_brotherSelector.html">d_组合选择器 - 兄弟选择器</a><br>
<a href="http://localhost:8080/css/d_selector/d2_selector_combinatiion/e_groupSelector.html">e_组合选择器 - 分组选择器</a><br>

<h5>d3_selector_attribute（属性选择器）</h5>
<a href="http://localhost:8080/css/d_selector/d3_selector_attribute/a_E.html">a_属性选择器 - 图片灯箱导航实例</a><br>
<a href="http://localhost:8080/css/d_selector/d3_selector_attribute/b_E.html">b_属性选择器 - 图片灯箱导航实例 E[attr]</a><br>
<a href="http://localhost:8080/css/d_selector/d3_selector_attribute/c_E.html">c_属性选择器 - 图片灯箱导航实例 E[attr="value"]</a><br>
<a href="http://localhost:8080/css/d_selector/d3_selector_attribute/d_E.html">d_属性选择器 - 图片灯箱导航实例 E[attr~="value"]</a><br>
<a href="http://localhost:8080/css/d_selector/d3_selector_attribute/e_E.html">e_属性选择器 - 图片灯箱导航实例 E[attr|="value"]</a><br>
<a href="http://localhost:8080/css/d_selector/d3_selector_attribute/f_E.html">f_属性选择器 - 图片灯箱导航实例 E[attr^="value"]</a><br>
<a href="http://localhost:8080/css/d_selector/d3_selector_attribute/g_E.html">g_属性选择器 - 图片灯箱导航实例 E[attr$="value"]</a><br>
<a href="http://localhost:8080/css/d_selector/d3_selector_attribute/h_E.html">h_属性选择器 - 图片灯箱导航实例 E[attr*="value"]</a><br>

<h5>d4_selector_pseudoclass（伪类选择器）</h5>
<a href="http://localhost:8080/css/d_selector/d4_selector_pseudoclass/a_Dynamic.html">a_伪类选择器 - 动态伪类</a><br>
<a href="http://localhost:8080/css/d_selector/d4_selector_pseudoclass/b_Structure.html">b_伪类选择器 - 结构伪类</a><br>
<a href="http://localhost:8080/css/d_selector/d4_selector_pseudoclass/c_No.html">c_伪类选择器 - 否定伪类</a><br>
<a href="http://localhost:8080/css/d_selector/d4_selector_pseudoclass/d_State.html">d_伪类选择器 - 状态伪类</a><br>
<a href="http://localhost:8080/css/d_selector/d4_selector_pseudoclass/e_Target.html">e_伪类选择器 - 目标伪类</a><br>

<h5>d5_practice（实战案例）</h5>
<a href="http://localhost:8080/css/d_selector/d5_practice_menu/menu.html">a_实战案例 - 设计菜单样式</a><br>
<a href="http://localhost:8080/css/d_selector/d6_practice_form/form.html">b_实战案例 - 设计表单样式</a><br>
<a href="http://localhost:8080/css/d_selector/d7_practice_link/link.html">c_实战案例 - 设计超链接样式</a><br>
<a href="http://localhost:8080/css/d_selector/d8_practice_table/table.html">d_实战案例 - 设计表格样式</a><br>

<hr>

<h3>e_webpage（美化网页文本）</h3>

<h5>e1_webpage_FontStyle（字体样式）</h5>
<a href="http://localhost:8080/css/e_webpage/e1_webpage_FontStyle/a_Font_Type.html">a_字体样式 - 字体类型</a><br>
<a href="http://localhost:8080/css/e_webpage/e1_webpage_FontStyle/b_Font_Size.html">b_字体样式 - 字体大小</a><br>
<a href="http://localhost:8080/css/e_webpage/e1_webpage_FontStyle/c_Font_Color.html">c_字体样式 - 字体颜色</a><br>
<a href="http://localhost:8080/css/e_webpage/e1_webpage_FontStyle/d_Font_Weight.html">d_字体样式 - 字体粗细</a><br>
<a href="http://localhost:8080/css/e_webpage/e1_webpage_FontStyle/e_Font_italic.html">e_字体样式 - 斜体字体</a><br>
<a href="http://localhost:8080/css/e_webpage/e1_webpage_FontStyle/f_Font_Underline.html">f_字体样式 - 下划线</a><br>
<a href="http://localhost:8080/css/e_webpage/e1_webpage_FontStyle/g_Font_Variant.html">g_字体样式 - 字体大小写</a><br>

<h5>e2_webpage_TextStyle（文本样式）</h5>
<a href="http://localhost:8080/css/e_webpage/e2_webpage_TextStyle/a_Text_Align.html">a_文本样式 - 文本对齐方式</a><br>
<a href="http://localhost:8080/css/e_webpage/e2_webpage_TextStyle/b_Text_VerticalAlign.html">b_文本样式 - 垂直对齐方式</a><br>
<a href="http://localhost:8080/css/e_webpage/e2_webpage_TextStyle/c_Text_Spacing.html">c_文本样式 - 字距和词距</a><br>
<a href="http://localhost:8080/css/e_webpage/e2_webpage_TextStyle/d_Text_Height.html">d_文本样式 - 行高</a><br>
<a href="http://localhost:8080/css/e_webpage/e2_webpage_TextStyle/e_Text_Indent.html">e_文本样式 - 缩进</a><br>

<h5>e3_webpage_CSS3_TextStyle（CSS3新增文本样式）</h5>
<a href="http://localhost:8080/css/e_webpage/e3_webpage_CSS3_TextStyle/a_Text_Shadow.html">a_CSS3新增文本样式 - 文本阴影</a><br>
<a href="http://localhost:8080/css/e_webpage/e3_webpage_CSS3_TextStyle/b1_Text_ShadowEffects_Contrast.html">b1_CSS3新增文本样式 - 阴影特效1：通过阴影增加前景色与背景色的对比度</a><br>
<a href="http://localhost:8080/css/e_webpage/e3_webpage_CSS3_TextStyle/b2_Text_ShadowEffects_Multicolor.html">b2_CSS3新增文本样式 - 阴影特效2：多色阴影</a><br>
<a href="http://localhost:8080/css/e_webpage/e3_webpage_CSS3_TextStyle/b3_Text_ShadowEffects_FlameWords.html">b3_CSS3新增文本样式 - 阴影特效3：火焰文字</a><br>
<a href="http://localhost:8080/css/e_webpage/e3_webpage_CSS3_TextStyle/b4_Text_ShadowEffects_StereoWords.html">b4_CSS3新增文本样式 - 阴影特效4：立体文字</a><br>
<a href="http://localhost:8080/css/e_webpage/e3_webpage_CSS3_TextStyle/b5_Text_ShadowEffects_Stroke.html">b5_CSS3新增文本样式 - 阴影特效5：描边文字</a><br>
<a href="http://localhost:8080/css/e_webpage/e3_webpage_CSS3_TextStyle/b6_Text_ShadowEffects_OuterGlow.html">b6_CSS3新增文本样式 - 阴影特效6：外发光字体</a><br>
<a href="http://localhost:8080/css/e_webpage/e3_webpage_CSS3_TextStyle/c_Text_Overflow.html">c_CSS3新增文本样式 - 溢出文本</a><br>
<a href="http://localhost:8080/css/e_webpage/e3_webpage_CSS3_TextStyle/d_Text_LineBreak.html">d_CSS3新增文本样式 - 文本换行</a><br>
<a href="http://localhost:8080/css/e_webpage/e3_webpage_CSS3_TextStyle/e_Text_Content.html">e_CSS3新增文本样式 - 添加动态内容</a><br>
<a href="http://localhost:8080/css/e_webpage/e3_webpage_CSS3_TextStyle/f_Text_initial.html">f_CSS3新增文本样式 - 恢复默认样式</a><br>
<a href="http://localhost:8080/css/e_webpage/e3_webpage_CSS3_TextStyle/g_Text_CustomFont.html">g_CSS3新增文本样式 - 自定义字体</a><br>

<h5>e4_practice（实战案例）</h5>
<a href="http://localhost:8080/css/e_webpage/e4_practice/a_practice1_WebPageFont.html">a_实战案例 - 配置网页字体大小</a><br>
<a href="http://localhost:8080/css/e_webpage/e4_practice/b_practice2_FontSize.html">b_实战案例 - 字体大小与网页布局关联</a><br>
<a href="http://localhost:8080/css/e_webpage/e4_practice/c_practice3_MatchColor.html">c_实战案例 - 网页配色</a><br>
<a href="http://localhost:8080/css/e_webpage/e4_practice/d_practice4_Centered.html">d_实战案例 - 网页居中显示</a><br>
<a href="http://localhost:8080/css/e_webpage/e4_practice/e_practice5_VerticalAlign.html">e_实战案例 - 垂直对齐</a><br>
<a href="http://localhost:8080/css/e_webpage/e4_practice/f_practice6_HideText.html">f_实战案例 - 文字隐藏</a><br>
<a href="http://localhost:8080/css/e_webpage/e4_practice/g_practice7_Hide.html">g_实战案例 - 以图代替文字</a><br>
<a href="http://localhost:8080/css/e_webpage/e4_practice/h_practice8_Newspaper.html">h_实战案例 - 设置中文报刊版式</a><br>
<a href="http://localhost:8080/css/e_webpage/e4_practice/i_practice9_index.html">i_实战案例 - 设计特效首页</a><br>
<a href="http://localhost:8080/css/e_webpage/e4_practice/j_practice10_RGBA.html">j_实战案例 - 使用RGBA</a><br>
<a href="http://localhost:8080/css/e_webpage/e4_practice/k_practice11_HSL.html">k_实战案例 - HSL</a><br>
<a href="http://localhost:8080/css/e_webpage/e4_practice/l_practice12_HSLTable.html">l_实战案例 - HSL制作配色表</a><br>

<hr>

<h3>f_image（美化图像）</h3>

<h5>f1_image（图像）</h5>
<a href="http://localhost:8080/css/f_image/f1_image/a_img.html">a_img标签使用</a><br>

<h5>f2_image_Style（设置图像样式）</h5>
<a href="http://localhost:8080/css/f_image/f2_image_Style/a_imageStyle_Size.html">a_定义图像大小</a><br>
<a href="http://localhost:8080/css/f_image/f2_image_Style/b_imageStyle_Border.html">b_图像边框 - 边框样式</a><br>
<a href="http://localhost:8080/css/f_image/f2_image_Style/c_imageStyle_BorderColor.html">c_图像边框 - 边框颜色</a><br>
<a href="http://localhost:8080/css/f_image/f2_image_Style/d_imageStyle_Width.html">d_图像边框 - 边框宽度</a><br>
<a href="http://localhost:8080/css/f_image/f2_image_Style/e_imageStyle_Opacity.html">e_图像不透明度</a><br>
<a href="http://localhost:8080/css/f_image/f2_image_Style/f_imageStyle_Radius.html">f_圆角图像</a><br>
<a href="http://localhost:8080/css/f_image/f2_image_Style/g_imageStyle_Shadow.html">g_阴影图像</a><br>
<a href="http://localhost:8080/css/f_image/f2_image_Style/h_imageStyle_TuvotMixer.html">h_图文混排</a><br>

<h5>f3_image_background（设置背景图像）</h5>
<a href="http://localhost:8080/css/f_image/f3_image_background/a_imagebg.html">a_设置背景图像</a><br>
<a href="http://localhost:8080/css/f_image/f3_image_background/b_imagebg_Gradient.html">b_设置背景图像 - 渐变背景</a><br>
<a href="http://localhost:8080/css/f_image/f3_image_background/c_imagebg_Gradient.html">c_设置背景图像 - 渐变背景</a><br>
<a href="http://localhost:8080/css/f_image/f3_image_background/d_imagebg_Repeat.html">d_设置背景图像 - 显示方式</a><br>
<a href="http://localhost:8080/css/f_image/f3_image_background/e_imagebg_Position.html">e_设置背景图像 - 显示位置</a><br>
<a href="http://localhost:8080/css/f_image/f3_image_background/f_imagebg_Attachment.html">f_设置背景图像 - 固定背景</a><br>
<a href="http://localhost:8080/css/f_image/f3_image_background/g_imagebg_Origin.html">g_设置背景图像 - 更改坐标</a><br>
<a href="http://localhost:8080/css/f_image/f3_image_background/h_imagebg_Clip.html">h_设置背景图像 - 裁剪区域</a><br>
<a href="http://localhost:8080/css/f_image/f3_image_background/i_imagebg_Size.html">i_设置背景图像 - 图像大小</a><br>
<a href="http://localhost:8080/css/f_image/f3_image_background/j_imagebg_Break.html">j_设置背景图像 - 图像循环方式</a><br>
<a href="http://localhost:8080/css/f_image/f3_image_background/k_imagebg_Mix.html">k_设置背景图像 - 多背景图</a><br>

<h5>f4_image_gradientbg（定义渐变背景）</h5>
<a href="http://localhost:8080/css/f_image/f4_image_gradientbg/a_imagegradient_WebKit1.html">a_渐变背景 - WebKit（直线渐变）</a><br>
<a href="http://localhost:8080/css/f_image/f4_image_gradientbg/b_imagegradient_WebKit2.html">b_渐变背景 - WebKit（直线渐变）</a><br>
<a href="http://localhost:8080/css/f_image/f4_image_gradientbg/c_imagegradient_WebKit3.html">c_渐变背景 - WebKit（二重渐变，直线渐变）</a><br>
<a href="http://localhost:8080/css/f_image/f4_image_gradientbg/d_imagegradient_WebKit4.html">d_渐变背景 - WebKit（径向渐变_同心圆）</a><br>
<a href="http://localhost:8080/css/f_image/f4_image_gradientbg/e_imagegradient_WebKit5.html">e_渐变背景 - WebKit（径向渐变_非同心圆）</a><br>
<a href="http://localhost:8080/css/f_image/f4_image_gradientbg/f_imagegradient_WebKit6.html">f_渐变背景 - WebKit（径向渐变_球形）</a><br>
<a href="http://localhost:8080/css/f_image/f4_image_gradientbg/g_imagegradient_Gecko1.html">g_渐变背景 - WebKit（线性渐变）</a><br>

<h5>f5_practice（实战案例）</h5>
<a href="http://localhost:8080/css/f_image/f5_practice/a_practice1_NewsIndex.html">a_实战案例 - 图文新闻内容页</a><br>
<a href="http://localhost:8080/css/f_image/f5_practice/b_practice2_Button.html">b_实战案例 - 设计精致按钮</a><br>
<a href="http://localhost:8080/css/f_image/f5_practice/c_practice3_Border.html">c_实战案例 - 设计花边框</a><br>
<a href="http://localhost:8080/css/f_image/f5_practice/d_practice4_Shadow.html">d_实战案例 - 设计阴影白边效果</a><br>
<a href="http://localhost:8080/css/f_image/f5_practice/e_practice5_Gradient.html">e_实战案例 - 设计网页纹理背景</a><br>
<a href="http://localhost:8080/css/f_image/f5_practice/f_practice6_GradientBall.html">f_实战案例 - 设计发光的球体</a><br>
<a href="http://localhost:8080/css/f_image/f5_practice/g_practice7_icon.html">g_实战案例 - 设计图标按钮</a><br>
<a href="http://localhost:8080/css/f_image/f5_practice/h_practice8_icon_all.html">h_实战案例 - 图标按钮</a><br>

<hr>

<h3>g_hyperlink（美化超链接）</h3>

<h5>g1_define_hyperlink（定义超链接）</h5>
<a href="http://localhost:8080/css/g_hyperlink/g1_define_hyperlink/a_hyperlink_a.html">a_定义超链接 - a标签</a><br>
<a href="http://localhost:8080/css/g_hyperlink/g1_define_hyperlink/b_hyperlink_Anchor.html">b_定义超链接 - 锚点链接</a><br>
<a href="http://localhost:8080/css/g_hyperlink/g1_define_hyperlink/c_hyperlink_Link.html">c_定义超链接 - 不同目标的链接</a><br>
<a href="http://localhost:8080/css/g_hyperlink/g1_define_hyperlink/d_hyperlink_download.html">d_定义超链接 - 下载链接</a><br>
<a href="http://localhost:8080/css/g_hyperlink/g1_define_hyperlink/e_hyperlink_HotSpotRegion.html">e_定义超链接 - 热点区域</a><br>
<a href="http://localhost:8080/css/g_hyperlink/g1_define_hyperlink/f_hyperlink_iframe.html">f_定义超链接 - 浮动框架</a><br>

<h5>g2_set_hyperlink（设置超链接样式）</h5>
<a href="http://localhost:8080/css/g_hyperlink/g2_set_hyperlink/a_Style.html">a_定义超链接 - 超链接样式</a><br>

<h5>g3_practice（实战案例）</h5>
<a href="http://localhost:8080/css/g_hyperlink/g3_practice/a_practice1_Underline.html">a_实战案例 - 下划线样式</a><br>
<a href="http://localhost:8080/css/g_hyperlink/g3_practice/b_practice2_Underline.html">b_实战案例 - 下划线样式</a><br>
<a href="http://localhost:8080/css/g_hyperlink/g3_practice/c_practice3_StereoStyle.html">c_实战案例 - 超链接的立体样式</a><br>
<a href="http://localhost:8080/css/g_hyperlink/g3_practice/d_practice4_DynamicStyle_Font.html">d_实战案例 - 超链接的动态样式</a><br>
<a href="http://localhost:8080/css/g_hyperlink/g3_practice/e_practice5_DynamicStyle.html">e_实战案例 - 超链接的动态样式（定义运动动态样式）</a><br>
<a href="http://localhost:8080/css/g_hyperlink/g3_practice/f_practice6_ExchangeImage.html">f_实战案例 - 超链接的图像交换样式</a><br>
<a href="http://localhost:8080/css/g_hyperlink/g3_practice/g_practice7_Cursor.html">g_实战案例 - 鼠标样式</a><br>
<a href="http://localhost:8080/css/g_hyperlink/g3_practice/h_practice8_GraphicalButtom.html">h_实战案例 - 超链接的图形化按钮样式</a><br>

<hr>

<h3>h_list（美化列表）</h3>

<h5>h1_list_structure（列表的基本结构）</h5>
<a href="http://localhost:8080/css/h_list/h1_list_structure/a_List_Type.html">a_列表的基本结构 - 列表分类</a><br>

<h5>h2_list_create（创建列表）</h5>
<a href="http://localhost:8080/css/h_list/h2_list_create/a_list_ul.html">a_创建列表 - 无序列表</a><br>
<a href="http://localhost:8080/css/h_list/h2_list_create/b_list_ol.html">b_创建列表 - 有序列表</a><br>
<a href="http://localhost:8080/css/h_list/h2_list_create/c_list_dl.html">c_创建列表 - 定义列表</a><br>
<a href="http://localhost:8080/css/h_list/h2_list_create/d_list_menu.html">d_创建列表 - 菜单列表</a><br>
<a href="http://localhost:8080/css/h_list/h2_list_create/e_list_menuItem.html">e_创建列表 - 弹出菜单（当右击鼠标时，新的菜单项将出现在文档的任何地方）</a><br>
<a href="http://localhost:8080/css/h_list/h2_list_create/f_list_menuItem.html">f_创建列表 - 弹出菜单（通过在特定元素上给contextmenu属性赋值，来限制新菜单项的作用区域）</a><br>
<a href="http://localhost:8080/css/h_list/h2_list_create/g_list_menuitem.html">g_创建列表 - 弹出菜单（为快捷菜单添加子菜单和图标）</a><br>
<a href="http://localhost:8080/css/h_list/h2_list_create/h_practice1_TransformImage.html">h_实战案例 - 设计图片旋转功能</a><br>
<a href="http://localhost:8080/css/h_list/h2_list_create/i_practice2_Share.html">i_实战案例 - 设计分享功能</a><br>
<a href="http://localhost:8080/css/h_list/h2_list_create/j_practice3_TaskList.html">j_实战案例 - 任务列表</a><br>

<h5>h3_list_style（列表样式）</h5>
<a href="http://localhost:8080/css/h_list/h3_list_style/a_list_StyleType.html">a_列表样式 - 项目符号类型</a><br>
<a href="http://localhost:8080/css/h_list/h3_list_style/b_list_StyleImage.html">b_列表样式 - 自定义项目符号</a><br>
<a href="http://localhost:8080/css/h_list/h3_list_style/c_list_StyleBg.html">c_列表样式 - 使用背景图设计项目符号</a><br>
<a href="http://localhost:8080/css/h_list/h3_list_style/d_list_StyleDynamicGraph.html">d_列表样式 - 动态图像项目列表符号</a><br>
<a href="http://localhost:8080/css/h_list/h3_list_style/e_list_Layout_Stack.html">e_列表布局 - 堆叠样式</a><br>
<a href="http://localhost:8080/css/h_list/h3_list_style/f_list_Layout_Stack.html">f_列表布局 - 堆叠样式</a><br>
<a href="http://localhost:8080/css/h_list/h3_list_style/g_list_Layout_Horizontal.html">g_列表布局 - 水平布局</a><br>
<a href="http://localhost:8080/css/h_list/h3_list_style/h_list_Layout_Horizontal.html">h_列表布局 - 水平布局</a><br>

<h5>h4_practice（实战案例）</h5>
<a href="http://localhost:8080/css/h_list/h4_practice/a_practice1_NavigationBar.html">a_实战案例 - 设计导航条（垂直、水平导航条）</a><br>
<a href="http://localhost:8080/css/h_list/h4_practice/b_practice2_MultilevelMenu.html">b_实战案例 - 设计多级菜单</a><br>
<a href="http://localhost:8080/css/h_list/h4_practice/c_practice3_SlideMenu.html">c_实战案例 - 设计滑动门菜单</a><br>
<a href="http://localhost:8080/css/h_list/h4_practice/d_practice4_RankList.html">d_实战案例 - 设计排行榜</a><br>
<a href="http://localhost:8080/css/h_list/h4_practice/e_practice5_ImageText.html">e_实战案例 - 图文列表</a><br>

<hr>

<h3>i_table（美化表格）</h3>

<h5>i1_basic_table（表格基本结构）</h5>
<a href="http://localhost:8080/css/i_table/i1_basic_table/a_EarlyTable.html">a_表格基本结构 - 早期表格结构</a><br>
<a href="http://localhost:8080/css/i_table/i1_basic_table/b_StandardTable.html">a_表格基本结构 - 标准化的表格结构</a><br>

<h5>i2_creat_table（创建表格）</h5>
<a href="http://localhost:8080/css/i_table/i2_creat_table/a_Creat_SimpleTable.html">a_创建表格 - 简单表格</a><br>
<a href="http://localhost:8080/css/i_table/i2_creat_table/b_Creat_TheadTable.html">b_创建表格 - 包含表头的表格</a><br>
<a href="http://localhost:8080/css/i_table/i2_creat_table/c_Creat_Caption.html">c_创建表格 - 包含标题的表格</a><br>
<a href="http://localhost:8080/css/i_table/i2_creat_table/d_Creat_StructureTable.html">d_创建表格 - 结构化的表格</a><br>
<a href="http://localhost:8080/css/i_table/i2_creat_table/e_Creat_col.html">e_创建表格 - 列分组的表格（col）</a><br>
<a href="http://localhost:8080/css/i_table/i2_creat_table/f_Creat_colgroup.html">f_创建表格 - 列分组的表格（colgroup）</a><br>

<h5>i3_attribute_table（表格属性）</h5>
<a href="http://localhost:8080/css/i_table/i3_attribute_table/a_SingleLine_Table.html">a_表格属性 - 设计单线表格</a><br>
<a href="http://localhost:8080/css/i_table/i3_attribute_table/b_cellpadding_Table.html">b_表格属性 - 设计井字表格</a><br>
<a href="http://localhost:8080/css/i_table/i3_attribute_table/c_HariLine_Table.html">c_表格属性 - 设计细线表格</a><br>
<a href="http://localhost:8080/css/i_table/i3_attribute_table/d_Summary_Table.html">d_表格属性 - 设置表格说明</a><br>

<h5>i4_attribute_cell（单元格属性）</h5>
<a href="http://localhost:8080/css/i_table/i4_attribute_cell/a_span_Table.html">a_单元格属性 - 单元格跨行跨列显示</a><br>
<a href="http://localhost:8080/css/i_table/i4_attribute_cell/b_scope_Table.html">b_单元格属性 - 定义表头单元格</a><br>
<a href="http://localhost:8080/css/i_table/i4_attribute_cell/c_headers_Table.html">c_单元格属性 - 为单元格指定表头</a><br>
<a href="http://localhost:8080/css/i_table/i4_attribute_cell/d_abbr_Table.html">d_单元格属性 - 定义单元格信息缩写</a><br>
<a href="http://localhost:8080/css/i_table/i4_attribute_cell/e_axis_Table.html">e_单元格属性 - 对单元格进行分类</a><br>

<h5>i5_style_table（表格CSS样式）</h5>
<a href="http://localhost:8080/css/i_table/i5_style_table/a_border_Style.html">a_表格CSS样式 - 设置细线表格</a><br>
<a href="http://localhost:8080/css/i_table/i5_style_table/b_border-spacing_Style.html">b_表格CSS样式 - 定义单元格间距和空隙</a><br>
<a href="http://localhost:8080/css/i_table/i5_style_table/c_empty-cells_Style.html">c_表格CSS样式 - 隐藏空单元格</a><br>
<a href="http://localhost:8080/css/i_table/i5_style_table/d_caption-side_Style.html">d_表格CSS样式 - 定义标题样式</a><br>
<a href="http://localhost:8080/css/i_table/i5_style_table/e_StyleOrder_Table.html">e_表格CSS样式 - 表格对象样式的层叠顺序</a><br>

<h5>i6_practice（实战案例）</h5>
<a href="http://localhost:8080/css/i_table/i6_practice/a_practice1_ChangeColor.html">a_实战案例 - 隔行换色（原始方法添加类样式的方式）</a><br>
<a href="http://localhost:8080/css/i_table/i6_practice/b_practice2_ChangeColor.html">b_实战案例 - 隔行换色（使用CSS3选择器智能匹配）</a><br>
<a href="http://localhost:8080/css/i_table/i6_practice/c_practice3_DynamicInteraction.html">c_实战案例 - 设计动态交互特效</a><br>
<a href="http://localhost:8080/css/i_table/i6_practice/d_practice4_DynamicInteraction.html">d_实战案例 - 设计动态交互特效（js）</a><br>
<a href="http://localhost:8080/css/i_table/i6_practice/e_practice5_Vision.html">e_实战案例 - 设计清淡视觉效果表格</a><br>
<a href="http://localhost:8080/css/i_table/i6_practice/f_practice6_StructureTable.html">f_实战案例 - 设计结构化表格</a><br>
<a href="http://localhost:8080/css/i_table/i6_practice/g_practice7_Calendar.html">g_实战案例 - 设计日历表</a><br>

<hr>

<h3>j_form（美化表单）</h3>

<h5>j1_form_structure（表单基本结构）</h5>
<a href="http://localhost:8080/css/j_form/j1_form_structure/a_Form.html">a_一个简单的form表单</a><br>

<h5>j2_form_creat（创建表单控件）</h5>
<a href="http://localhost:8080/css/j_form/j2_form_creat/a_input.html">a_输入型控件 - input属性</a><br>
<a href="http://localhost:8080/css/j_form/j2_form_creat/b_select_radio.html">b_选择型控件 - 单选按钮（radio）</a><br>
<a href="http://localhost:8080/css/j_form/j2_form_creat/c_select_checkbox.html">c_选择型控件 - 复选框（checkbox）</a><br>
<a href="http://localhost:8080/css/j_form/j2_form_creat/d_select_option.html">d_选择型控件 - 下拉选择菜单（option）</a><br>
<a href="http://localhost:8080/css/j_form/j2_form_creat/e_tabindex.html">e_辅助控件</a><br>

<h5>j3_form_input_type（H5新增输入类型）</h5>
<a href="http://localhost:8080/css/j_form/j3_form_input_type/a_Type_email.html">a_H5新增输入类型 - email类型</a><br>
<a href="http://localhost:8080/css/j_form/j3_form_input_type/b_Type_url.html">b_H5新增输入类型 - url类型</a><br>
<a href="http://localhost:8080/css/j_form/j3_form_input_type/c_Type_number.html">c_H5新增输入类型 - number类型</a><br>
<a href="http://localhost:8080/css/j_form/j3_form_input_type/d_Type_range.html">d_H5新增输入类型 - range类型</a><br>
<a href="http://localhost:8080/css/j_form/j3_form_input_type/e_Type_DatePickers.html">e_H5新增输入类型 - 日期选择器类型</a><br>
<a href="http://localhost:8080/css/j_form/j3_form_input_type/f_Type_search.html">f_H5新增输入类型 - search类型</a><br>
<a href="http://localhost:8080/css/j_form/j3_form_input_type/g_Type_tel.html">g_H5新增输入类型 - tel类型</a><br>
<a href="http://localhost:8080/css/j_form/j3_form_input_type/h_Type_color.html">h_H5新增输入类型 - color类型</a><br>

<h5>j4_form_input_attribute（H5新增输入属性）</h5>
<a href="http://localhost:8080/css/j_form/j4_form_input_attribute/a_attribute_autocomplete.html">a_H5新增输入属性 - autocomplete</a><br>
<a href="http://localhost:8080/css/j_form/j4_form_input_attribute/b_attribute_autofocus.html">b_H5新增输入属性 - autofocus</a><br>
<a href="http://localhost:8080/css/j_form/j4_form_input_attribute/c_attribute_form.html">c_H5新增输入属性 - form</a><br>
<a href="http://localhost:8080/css/j_form/j4_form_input_attribute/d_attribute_Overwrite.html">d_H5新增输入属性 - Overwrite</a><br>
<a href="http://localhost:8080/css/j_form/j4_form_input_attribute/e_attribute_height_width.html">e_H5新增输入属性 - height width</a><br>
<a href="http://localhost:8080/css/j_form/j4_form_input_attribute/f_attribute_list.html">f_H5新增输入属性 - list</a><br>
<a href="http://localhost:8080/css/j_form/j4_form_input_attribute/g_attribute_min_max_step.html">g_H5新增输入属性 - min、max、step</a><br>
<a href="http://localhost:8080/css/j_form/j4_form_input_attribute/h_attribute_multiple.html">h_H5新增输入属性 - multiple</a><br>
<a href="http://localhost:8080/css/j_form/j4_form_input_attribute/i_attribute_pattern.html">i_H5新增输入属性 - pattern</a><br>
<a href="http://localhost:8080/css/j_form/j4_form_input_attribute/j_attribute_placeholder.html">j_H5新增输入属性 - placeholder</a><br>
<a href="http://localhost:8080/css/j_form/j4_form_input_attribute/k_attribute_required.html">k_H5新增输入属性 - required</a><br>

<h5>j5_form_control（H5新增控件）</h5>
<a href="http://localhost:8080/css/j_form/j5_form_control/a_control_datalist.html">a_H5新增控件 - datalist</a><br>
<a href="http://localhost:8080/css/j_form/j5_form_control/b_control_keygen.html">b_H5新增控件 - keygen</a><br>
<a href="http://localhost:8080/css/j_form/j5_form_control/c_control_output.html">c_H5新增控件 - output</a><br>

<h5>j6_form_attribute（H5新增输入属性）</h5>
<a href="http://localhost:8080/css/j_form/j6_form_attribute/a_attribute_autocomplete.html">a_H5新增输入属性 - autocomplete</a><br>
<a href="http://localhost:8080/css/j_form/j6_form_attribute/b_attribute_novalidate.html">b_H5新增输入属性 - novalidate</a><br>
<a href="http://localhost:8080/css/j_form/j6_form_attribute/c_attribute_checkValidity.html">c_显式验证 - checkValidity()方法</a><br>

<h5>j7_practice（实战案例）</h5>
<a href="http://localhost:8080/css/j_form/j7_practice/a_practice1_feedback_form.html">a_实战案例 - 设计反馈表</a><br>
<a href="http://localhost:8080/css/j_form/j7_practice/b_practice2_login.html">b_实战案例 - 设计用户登录表</a><br>
<a href="http://localhost:8080/css/j_form/j7_practice/c_practice3_register.html">c_实战案例 - 设计用户注册页</a><br>
<a href="http://localhost:8080/css/j_form/j7_practice/d_practice4_search.html">d_实战案例 - 设计搜索页</a><br>
<a href="http://localhost:8080/css/j_form/j7_practice/e_practice5_custom_button.html">e_实战案例 - 自定义按钮样式</a><br>
<a href="http://localhost:8080/css/j_form/j7_practice/f_practice6_highlight.html">f_实战案例 - 高亮提示表单</a><br>
<a href="http://localhost:8080/css/j_form/j7_practice/g_practice7_imageStyle.html">g_实战案例 - 设计图标样式</a><br>

<hr>

<h3>k_layout（布局）</h3>

<h5>k1_layout_basic（CSS盒模型基础）</h5>
<a href="http://localhost:8080/css/k_layout/k1_layout_basic/a_basic_width.html">a_盒模型基础 - 定义大小</a><br>
<a href="http://localhost:8080/css/k_layout/k1_layout_basic/b_basic_border.html">b_盒模型基础 - 定义边框</a><br>
<a href="http://localhost:8080/css/k_layout/k1_layout_basic/c_basic_margin.html">c_盒模型基础 - 定义边界</a><br>
<a href="http://localhost:8080/css/k_layout/k1_layout_basic/d_basic_padding.html">d_盒模型基础 - 定义补白</a><br>

<h5>k2_layout_perfect（CSS3完善盒模型）</h5>
<a href="http://localhost:8080/css/k_layout/k2_layout_perfect/a_perfect_resize.html">a_CSS3完善盒模型 - 定义元素尺寸大小</a><br>
<a href="http://localhost:8080/css/k_layout/k2_layout_perfect/b_perfect_overflow.html">b_CSS3完善盒模型 - 溢出处理</a><br>
<a href="http://localhost:8080/css/k_layout/k2_layout_perfect/c_perfect_outline.html">c_CSS3完善盒模型 - 定义轮廓</a><br>
<a href="http://localhost:8080/css/k_layout/k2_layout_perfect/d_perfect_bordercolor.html">d_CSS3完善盒模型 - 定义多色边框</a><br>

<h5>k3_layout_practice（实战案例）</h5>
<hr>

<!--TODO：未完成 -->
<h3>l_animation</h3>
<a href="http://localhost:8080/css/l_animation/a_cascade.html">a_</a><br>
</body>
</html>